class Line {
  constructor() {
    this.type = 'straight_line';
    this.canDraw = true;

    this.properties = {
      start: {
        name: '起点',
        type: 'input',
        value: { x: 0, y: 0 },
      },
      end: {
        name: '终点',
        type: 'input',
        value: { x: 0, y: 0 },
      },
      color: {
        name: '颜色',
        type: 'color-picker',
        value: '#ddd',
      }
    }
  }

  clone() {
    return new Line();
  }

  onMouseDown(coord) {
    this.setStart(coord);
  }

  onMouseMove(coord) {
    this.setEnd(coord);
  }

  setStart(coord) {
    this.properties.start.value = coord;
  }

  setEnd(coord) {
    this.properties.end.value = coord;
  }

  render(ctx, canvas) {
    const { properties } = this;
    const { start, end } = properties;
    ctx.beginPath();

    ctx.moveTo(start.value.x, start.value.y);
    ctx.lineTo(end.value.x, end.value.y);

    ctx.stroke();

    ctx.closePath();
  }
}